class Test_20210314191143 {
	constructor( canvasId ) {
		this.message = new Array();
		this.theta = 0;
		this.name = "test1";
		
		this.startCnt = 0;
		this.endCnt = 0;
		
		this.image = new Image();
		this.image.onload = function() { this.draw( this.cc ) }.bind( this );
		this.image.src = "/cgi-bin/prj/20190831-素材／3Dお姉さん/aokami_nabiki.png";

		this.cc = document.getElementById( canvasId ).getContext( "2d" );
		this.icw = this.cc.canvas.width;
		this.ich = this.cc.canvas.height;
		this.cc.canvas.style.imageRendering	= "pixelated";
		this.cc.canvas.style.imageRendering	= "optimizeSpeed";
		let range = document.getElementById( "range1" );
		this.pixel = range.value;
		range.app = this;
		this.draw( this.cc );
		
		//サイズに関する親を探す
		this.parentNode = function() {
			let parentNode = this.cc.canvas.parentNode;
			let limit = 50;
			while( parentNode.tagName != "HTML" ) {

					//check.
					let cs = getComputedStyle( parentNode );
					if( cs.position == "absolute"
					|| cs.position == "relative" ) {
						break;
					}
					
				parentNode = parentNode.parentNode;
			}
			return parentNode;
		}.call( this );
		
		console.log( this.parentNode.tagName );
/*
		if( typeof ResizeObserver !== "undefined" ) {
			//リサイズされたら
			this.resizeObserver = new ResizeObserver(
				function( entries ) {
					console.log( "--- resized ---" );
					for( let entry of entries ) {
						for( let name in entry ) {
							console.log( "entry:", name, entry[ name ] );
							this.canvasUpdate();
						}
					}
				}.bind( this )//callback
			);
			this.resizeObserver.observe( this.parentNode );
		} else {
			this.message.push( "このブラウザには、ResizeObserver API が用意されていません。" );
			this.message.push( "そのため、紹介しているリサイズの機能は試せません :-(" );
		}
*/
/*
if( typeof ResizeObserver !== "undefined" ) {
	console.log(2134);
}
*/
			this.timerId = setInterval( function() {
				this.theta += .03;
				this.draw( this.cc );
			}.bind( this ), 100 );

	}
	//プロパティ変更されたら
	set pixel( value ) {
		this.__pixel = value;
		this.canvasUpdate();
	}
	get pixel() {
		return this.__pixel;
	}
	canvasUpdate() {
		let canvas = this.cc.canvas;
		let cs = getComputedStyle( canvas );
		let ow = cs.width.replace( /px/, "" );
		let oh = cs.height.replace( /px/, "" );
		let iw = ow;
		let ih = oh;
			//check.
			if( cs.boxSizing == "border-box" ) {
				iw -= cs.borderLeftWidth.replace( /px/, "" );
				iw -= cs.borderRightWidth.replace( /px/, "" );
				ih -= cs.borderTopWidth.replace( /px/, "" );
				ih -= cs.borderBottomWidth.replace( /px/, "" );
			} else {
				ow += cs.borderLeftWidth.replace( /px/, "" );
				ow += cs.borderRightWidth.replace( /px/, "" );
				oh += cs.borderTopWidth.replace( /px/, "" );
				oh += cs.borderBottomWidth.replace( /px/, "" );
			}
		canvas.style.height = cs.height;
		canvas.width = iw / this.pixel;
		canvas.height = ih / this.pixel;
		this.cc.scale( 1 / this.pixel, 1 / this.pixel );
		this.canvasWidth = iw;
		this.canvasHeight = ih;
		this.draw( this.cc );
	}
	draw( cc ) {
		cc.clearRect( 0, 0, this.canvasWidth, this.canvasHeight );
		
		cc.save();
		let w = this.image.width / 2;
		let h = this.image.height / 2;
		cc.translate( this.canvasWidth - 200, this.canvasHeight - 200 );
		cc.rotate( this.theta );
		cc.drawImage( this.image, - w / 2, - h / 2, w, h );
		cc.restore();

		cc.beginPath();
		cc.arc( this.canvasWidth / 2, this.canvasHeight / 2, 100, 0, 6.28 );
		cc.closePath();
		cc.stroke();
		
		
		cc.font = "16px ''";
		for( let i = 0; i < this.message.length; i++ ) {
			cc.fillText( this.message[ i ], 10, 32 + 32 * i);
		}
	}
	start() {
		return;
//		this.startCnt ++;
		console.log( "start" );
		if( typeof this.timerId === "undefined" ) {
			this.timerId = setInterval( function() {
				this.theta += .03;
				this.draw( this.cc );
			}.bind( this ), 100 );
		}
/*
		this.f = function() {
			let r = this.cc.canvas.getBoundingClientRect();
			let y = window.scrollY;
				y += r.top - ( window.innerHeight - r.height ) / 2;
			scrollTo( 0, y );
		}.bind( this );
		addEventListener( "resize", this.f.bind( this ) );
*/
	}
	stop() {
		return;
//		this.endCnt ++;
		if( typeof this.timerId !== "undefined" ) {
			clearInterval( this.timerId );
			delete this.timerId;
		}
//		removeEventListener( "resize", this.f );
	}
}